<template>
  <div>
    <van-search
            @focus="$router.push('/search')"
            shape="round"
            v-model="value"
            placeholder="请输入搜索关键词"
            style="margin-top: 2.375rem;"
          />
    <!-- 推荐美食 -->
    <van-nav-bar title="美食中国" fixed />
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"   :show-indicators="false">
      <van-swipe-item><img src="/img/swiper1.jpg" alt="" class="swipe_img"></van-swipe-item>
      <van-swipe-item><img src="/img/swiper2.jpg" alt="" class="swipe_img"></van-swipe-item>
      <van-swipe-item><img src="/img/swiper3.jpg" alt="" class="swipe_img"></van-swipe-item>
      <van-swipe-item><img src="/img/swiper4.jpg" alt="" class="swipe_img"></van-swipe-item>
      <van-swipe-item><img src="/img/swiper5.jpg" alt="" class="swipe_img"></van-swipe-item>
    </van-swipe>
  
    <div style="margin: 10px 10px">
      <div v-for="(item, i) in content" :key="i">
        <div class="article">
          <!-- 单一文章信息开始 -->
          <!-- 头像 -->
          <router-link to="/detail/1">
            <div class="articleHead">
              <img :src="item.head" />
            </div>

            <!-- 文章图文信息开始 -->
            <div class="articleItem">
              <!-- 名字 -->
              <div class="article_name">
                <div>{{ item.username }}</div>
                <div>{{ item.pubTime|timeFil }}</div>
              </div>
              <!-- 文章简介开始 -->
              <div class="articleItem-wrapper xiangqing">
                {{ item.content }}
              </div>
              <!-- 文章简介结束 -->
              <!-- 文章图像开始  -->
              <div class="articleDes2">
                <div
                  class="articleDes1"
                  v-for="(itm, index) in imgs[i]"
                  v-show="itm"
                  :key="index"
                >
                  <img
                    v-show="itm"
                    :src="itm.imgs"
                    alt=""
                    @click.prevent="getImg(item, i, index)"
                  />
                </div>
              </div>
              <!-- 文章图像结束 -->
              <van-divider />

              <!-- 文章图文信息结束 -->
            </div>
            <!-- 单一文章信息结束 -->
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { ImagePreview } from "vant";
export default {
  name: "ImagePreview",
  data() {
    return {
      value:'',
      content:[],
      imgs:[]
    };
  },
  methods: {
    getImg(images, i, index) {
      console.log(i);
      //  console.log(this.content[index].imgs);
      ImagePreview({
        images: this.content[i].imgs,
        showIndex: true,
        loop: false,
        startPosition: index,
      });
    },
    search(){

    },
    Axios(){
      let url = ('/cuisines/quanzi');
      this.$axios.get(url).then((res) => {
        // console.log(res);
        this.content=res.data.data.res1
        this.imgs=res.data.data.arr
        console.log(this.imgs);
      });
      
    }
  },
  mounted(){
    this.Axios()
  },
  filters: {
    timeFil(val){
      return moment(val).format('YYYY/MM/DD HH:mm:ss')
    },
  }
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {

  color: rgb(173, 173, 173);
  font-size: 20px;
  line-height: 130px;
  text-align: center;
  // background-color: #39a9ed;
  // margin-top: 2.875rem;
  img{
    width: 100%;
    border-radius: 6px;
  }
}
// 标签
.article {
  margin: 0;

  // 内容页
  a {
    display: flex;
    .articleHead {
      // float: left;
      img {
        width: 40px;
        border-radius: 50%;
      }
    }

    .articleItem {
      .article_name {
        margin-left: 0.625rem;
        > div:first-child {
          color: #000;
          font-size: 1.125rem;
        }
        > div:last-child {
          font-size: 0.75rem;
        }
      }
      .xiangqing {
        color: #000;
        height: 30px;
        width: 80vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .articleItem-wrapper {
        font-size: 1.125rem;
        margin-top: 0.625rem;
      }
      .articleDes {
        overflow: hidden;
        display: flex;
        height: 12.5rem;
        flex-wrap: wrap;

        .articleDes1 {
          width: 6.25rem;
          height: 6.25rem;
          margin: 0.1rem;
          white-space: nowrap;
          overflow: hidden;
          // border: none;
          img {
            width: 100%;
          }
        }
      }
      .articleDes2 {
        overflow: hidden;
        height: 6.25rem;
        display: flex;
        flex-wrap: wrap;
        .articleDes1 {
          width: 6.25rem;
          margin: 0.1rem;
          white-space: nowrap;
          overflow: hidden;
          // border: none;
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
